import React from "react"

class PureComponentDemo extends React.PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      data: {
        name: "小毅",
        age: "21"
      }
    }
  }
  henderClick = () => {
    const { data } = this.state
    data.age++
    this.setState({ data: data })
  }
  henderClick1 = () => {
    const { data } = this.state
    data.age++
    this.setState({ data: { ...data } })
  }

  describeView = () => {
    let str = JSON.stringify('this.setState({ data:{...data} })')
    return (
      <div>
        PureComponent和 Component用法，差不多一样，唯一不同的是，纯组件P//ureComponent会浅比较，props和state是否相同，来决定是否重新渲染组件。所以一般用于性能调优，减少render次数。
        <p>
          点击按钮，没有任何反应，因为PureComponent会比较两次data对象，都指向同一个data,没有发生改变，所以不更新视图。
          解决这个问题很简单，只需要在handerClick事件中这么写,浅拷贝就能根本解决问题。
          <b>{str}</b>
        </p>
      </div>
    )
  }

  render() {
    const { data } = this.state
    return (
      <div>
        <h2>2、PureComponent</h2>
        <h3>名字:{data.name}</h3>
        <h3>年龄:{data.age}</h3>
        <button onClick={this.henderClick}>age ++</button>
        <button onClick={this.henderClick1}>age ++</button>
        {this.describeView()}
      </div>
    )
  }



}



export default PureComponentDemo